<template>
  <Card :bordered="false" dis-hover class="ivu-mt">
    <Row>
      <Col>
        <Button
          type="primary"
          @click="handleAdd"
          v-hasC="{
            name: 'v1-rbac-department-create',
            flag: 'v1/rbac/department/create',
          }"
          >新增</Button
        >
      </Col>
    </Row>
    <Table
      row-key="id"
      :columns="columns"
      :data="data"
      :loading="loading"
      class="ivu-mt-16"
      :max-height="650"
    >
      <template slot="status_str" slot-scope="{ row }">
        <Badge
          :status="row.status_str == '启用' ? 'success' : 'error'"
          :text="row.status_str"
        />
      </template>
      <template slot="default_role_arr" slot-scope="{ row }">
        <Tag type="border" v-for="item in row.default_role_arr" :key="item">{{
          item
        }}</Tag>
      </template>
      <template slot="url" slot-scope="{ row }">
        <a :href="row.url">{{ row.url }}</a>
      </template>
      <template slot="action" slot-scope="{ row }">
        <a
          @click="handleEdit(row)"
          v-hasC="{
            name: 'v1-rbac-department-update',
            flag: 'v1/rbac/department/update',
          }"
          >编辑</a
        >
        <Divider
          type="vertical"
          v-hasC="{
            name: 'v1-rbac-department-update',
            flag: 'v1/rbac/department/update',
          }"
        />
        <a
          @click="handleSet(row)"
          v-hasC="{
            name: 'v1-rbac-department-update-config',
            flag: 'v1/rbac/department/update-config',
          }"
          >配置</a
        >
        <Divider
          type="vertical"
          v-hasC="{
            name: 'v1-rbac-department-update-config',
            flag: 'v1/rbac/department/update-config',
          }"
        />
        <a
          @click="handleDel(row)"
          v-hasC="{
            name: 'v1-rbac-department-delete',
            flag: 'v1/rbac/department/delete',
          }"
          class="del"
          >删除</a
        >
      </template>
    </Table>

    <add ref="add" @refresh="refresh" />
    <Modal
      v-model="showSet"
      :title="`部门管理配置-${title}`"
      :draggable="true"
      :mask-closable="false"
      :width="500"
      @on-cancel="handleCancelSet"
      footer-hide
    >
      <Form :model="setItem" :label-width="80" ref="setItem" :rules="setRules">
        <FormItem label="应用项目" prop="project_ids">
          <Select
            v-model="setItem.project_ids"
            multiple
            :disabled="currentPid > 0"
            placeholder="请选择项目"
          >
            <Option
              :value="+item.value"
              v-for="item in projectList"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </FormItem>
      </Form>
      <div class="modalFoot">
        <Button @click="handleCancelSet()">取消</Button>
        <Button
          class="ivu-ml-16"
          :loading="btnLoading"
          type="primary"
          @click="handleSaveSet()"
          >确定</Button
        >
      </div>
    </Modal>
  </Card>
</template>
<script>
import add from "./add";
import {
  getDeptManageList,
  getDeptConfigInfo,
  deleteDepartment,
  departmentUpdateConfig,
} from "@/api/TApi/index.js";
export default {
  name: "managedept",
  components: { add },
  data() {
    return {
      loading: false,
      btnLoading: false,
      showSet: false,
      columns: [
        {
          title: "部门名称",
          key: "department_name",
          tree: true,
          minWidth: 150,
        },
        {
          title: "id",
          key: "id",
        },
        {
          title: "排序",
          key: "sort",
        },
        {
          title: "部门类型",
          key: "department_type_str",
        },
        {
          title: "默认角色",
          slot: "default_role_arr",
          minWidth: 180,
        },
        {
          title: "状态",
          slot: "status_str",
        },
        {
          title: "操作",
          slot: "action",
          fixed: "right",
          width: 160,
        },
      ],
      data: [],
      setRules: {
        project_ids: [
          {
            required: true,
            type: "array",
            message: "请选择项目",
            trigger: "change",
          },
        ],
      },
      projectList: [],
      currentPid: null,
      title: "",
      setItem: {
        id: null,
        project_ids: [],
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    refresh() {
      this.getData();
    },
    changeTreeData(data) {
      data.forEach((item) => {
        item._showChildren = true;
        if (item.children && item.children.length > 0) {
          this.changeTreeData(item.children);
        }
      });
      return data;
    },
    getData() {
      this.loading = true;
      getDeptManageList()
        .then((res) => {
          this.data = this.changeTreeData(res.list);
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleAdd() {
      this.$refs.add.getEditInfo(0, 0);
    },
    handleEdit(row) {
      this.$refs.add.getEditInfo(row.id, row.pid);
    },

    handleDel(row) {
      this.$Modal.confirm({
        title: "删除提示",
        content: "是否确认删除，删除后将不可还原",
        loading: true,
        onOk: () => {
          deleteDepartment({ id: row.id })
            .then(() => {
              this.$Message.success("删除成功！");
              this.getData();
              this.$Modal.remove();
            })
            .catch(() => {
              this.$Modal.remove();
            });
        },
      });
    },
    initData() {
      this.setItem = {
        id: null,
        project_ids: [],
      };
      this.currentPid = 0;
      this.$refs.setItem.resetFields();
    },

    handleSet(row) {
      this.title = row.department_name;
      this.initData();
      this.showSet = true;
      getDeptConfigInfo({ id: row.id }).then((res) => {
        this.currentPid = res.pid;
        this.projectList = res.condition.project;
        this.setItem.project_ids = res.project_ids;
        this.setItem.id = res.id;
      });
    },

    handleCancelSet() {
      this.showSet = false;
    },
    handleSaveSet() {
      this.$refs["setItem"].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          departmentUpdateConfig(this.setItem)
            .then(() => {
              this.$Message.success("保存成功！");
              this.btnLoading = false;
              this.showSet = false;
            })
            .catch(() => {
              this.btnLoading = false;
            });
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.modalFoot {
  text-align: right;
  border-top: 1px solid #ddd;
  padding-top: 16px;
  margin-top: 24px;
}
.title {
  color: #999;
  margin-bottom: 15px;
}
.ivu-tree {
  max-height: 500px;
  overflow-y: auto;
}
</style>
